<template>
	<view class="content">

		<u-tabs lineWidth="30" :activeStyle="{'color':'#5669FF'}" :list="tabList"></u-tabs>

		<!-- 球赛内容 -->
		<view v-for="item in 3">

			<view>
				<view class="dateBox padding20-40">
					<u--text bold align="center" size="25" text="2024年11月17日 明天">
					</u--text>
				</view>
			</view>
			<view class="ballGame">

				<view class="space-between">
					<view class="padding10-40">
						<u--text size="35" bold text="教个朋友局"></u--text>
						<view class="margin-top-2" style="display: flex;">
							<view style="margin-right: 3%;" v-for="item in 3" class="tag">养生局</view>
						</view>
					</view>

					<view class="padding10-40">
						<view>
							<view class="tag">暂未成局</view>
						</view>
						<view class="padding10-30" style="width: 150rpx;">
							<u-button iconColor="#F0635A" icon="thumb-up-fill" size="mini" color="#F0635A4D"
								shape="circle" text="我参加"></u-button>
						</view>
					</view>
				</view>

				<view>
					<view class="padding10-40" style="display: flex;">
						<view class="image-container">
							<u--image radius="20" :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg"
								width="130px" height="130px" @click="click"></u--image>
						</view>
						<view class="padding10-40">
							<text class="distance">时间：本周六16：00-18：00</text><br>
							<text class="distance">地点：12.6km | 诺克求大球场</text><br>
							<text class="distance">类型：足球（7人制）</text><br>
							<text class="distance">收费：￥400（AA制）</text><br>
						</view>
					</view>
				</view>

				<view class="gameInfo" style="width: 93%; height: auto; background-color: #F2F3F5; margin: 2% auto;">
					<view class="padding10-30">
						<u--text size="20"
							text="00:01:44.501项目'footballBookingApp' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看00:01:44.501 项目 'footballBookingApp' 编译成功。"></u--text>
					</view>
				</view>

				<!-- 头像 -->
				<view class="space-between margin-top-2">
					<view class="padding10-30" style="display: flex;">
						<view v-for="item in 6" style="margin-right: 2%">
							<u--image width="26px" height="26px" radius="8px"
								src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
						</view>
					</view>
					<view class="padding10-30">
						<text>报名 12/</text>
						<text>16-30</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '当前日历',
				}, {
					name: '历史日历',
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		height: 100%;
		width: 100%;
		padding-bottom: 100rpx;
	}

	.dateBox {
		width: 50%;
		height: auto;
		border-radius: 830rpx;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F4F4FE;
		margin: 3% auto;
	}

	.ballGame {
		padding: 20rpx 0;
		width: 93%;
		height: auto;
		border-radius: 16.98px;
		opacity: 1;
		margin: 3% auto;
		background: #FFFFFF;
		box-shadow: 0px 2.12px 20px 0px rgba(83, 89, 144, 0.15);
	}
</style>